Designing for Color Blindness

For course media to be accessible, it must have alt text and long descriptions written for it. All images should also be checked for color blindness accessibility. Follow these steps to check your course media and remediate any images that are not clear and legible.

Workflows for checking images

Method 1: Downloading all images

1. Download images from Canvas. This will be most efficient if you are following our best practices for Canvas files guidelines
   1. Keep track of your images by making a copy of TLC’s Image Inventory Template
2. Upload to Coblis — Color Blindness Simulator
3. Check the image using all the filters and ensure that the graphic is still coherent

Method 2: Installing a webpage filter

Alternatively, you can install this webpage filter from Color Oracle and go through all of the pages on your website. Be sure to keep track of images with TLC’s Image Inventory Template

Remediation

There are different context-dependent remediation options for you to use. It is best practice use multiple ways of identifying an element, so consider using a combination of these:

1. Change the colors in the image so there is enough contrast between different elements.
2. Label items in the image. For example, if there is a graph with multiple lines, label them with a letter (Line A, Line B, etc) or a number (Line 1, Line 2, etc).
3. If the image is for a question, describe relevant elements briefly in the question
    

Resources

Accessible color and contrast 

Coblis — Color Blindness Simulator 

Checking the Contrast or Legibility of a Figure | BioRender Help Center

Beautiful, accessible traffic light colors | by Alex O'Neal | UX Collective